<template>
    <h1>Sprite</h1>
    <div class="container" ref="ContainerRef" :style="{ width: size.width + 'px', height: size.height + 'px' }"></div>
</template>

<script setup lang="ts" name="sprite">
import { ref } from 'vue';
import DefaultScene from '../libs/scene2'
import * as THREE from 'three';
const defaultScene = new DefaultScene();
const { size, scene, camera, controls } = defaultScene;

const ContainerRef = ref();
defaultScene.init(ContainerRef);

const axesHelper = new THREE.AxesHelper(350);
scene.add(axesHelper);

const ambient = new THREE.AmbientLight(0xffffff, 1);
scene.add(ambient);
camera.position.set(100, 50, 100); // 设置相机的位置
camera.lookAt(100, 50, 0);
controls.target.set(100, 50, 0);   // 设置相机观看点
controls.update();
scene.background = new THREE.Color(0xE0E0E0)

// const camera2 = camera.clone();

// const cameraPerspectiveHelper = new THREE.CameraHelper(camera2);
// scene.add(cameraPerspectiveHelper);



const texture = new THREE.TextureLoader().load("/img/rain.png");
const spriteMaterial = new THREE.SpriteMaterial({
    map: texture, 
});

const GlobalGroup = new THREE.Group();
scene.add(GlobalGroup);

for (let i = 0; i < 10000; i++) {
    let x = Math.random() * 200;
    let y = Math.random() * 100;
    let z = Math.random() * 100;
    const sprite = new THREE.Sprite(spriteMaterial);
    sprite.position.set(x, y, z);
    GlobalGroup.add(sprite)
}

const clock = new THREE.Clock();

defaultScene.addLoops(() => {
    const time = clock.getDelta();
    for (const item of GlobalGroup.children) {
        item.position.y -= time * 15;
        if (item.position.y <= 0) {
            item.position.y = 100;
        }
    }
})

</script>